﻿/*
 * Ext JS Library 2.0 Alpha 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
    Ext.QuickTips.init();
    
    var xg = Ext.grid;

    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    var sm = new xg.CheckboxSelectionModel();//CellSelectionModel();//
    var ds = new Ext.data.Store({
    				proxy: new Ext.data.MemoryProxy(xg.dummyData),
            reader: reader,
            data: xg.dummyData
            });
    var contextMenu = new Ext.menu.Menu({
            id: 'mainMenu',
            items: [
                { icon:'icons/table_add.png', text:'Add', handler:this.handleUpdate, scope:this },
                { icon:'icons/table_edit.png', text:'Edit', handler: this.handleShowModels, scope:this },
                { icon:'icons/table_delete.png', text:'Delete', handler: this.handleDelete, scope:this },
                '-',
                { icon:'icons/chart_bar.png', text:'Chart', handler: this.handleDelete, scope:this },
                { icon:'icons/table_refresh.png', text:'Refresh List', handler: function() { this.basketStore.reload(); }, scope:this }
            ]
    });
    var grid4 = new xg.GridPanel({
        id:'button-grid',
        ds: ds,
        cm: new xg.ColumnModel([
            sm,
            {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
            {header: "PctChange", width: 20, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        sm: sm,

        viewConfig: {
            forceFit:true
        },

        // inline toolbars
        tbar:[{
            text: 'Add',
            tooltip: { title:'Add', text: 'Add a new Basket', animate: true, trackMouse: true },
            cls: 'x-btn-text-icon add',
            handler: this.showInsertDialog,
            scope: this
        },{
            text: 'Edit',
            tooltip: { title:'Edit', text: 'Edit the selected Basket' },
            cls: 'x-btn-text-icon edit',
            handler: this.handleUpdate,
            scope: this
        },{
            text: 'Delete',
            tooltip: { title:'Delete', text: 'Delete the selected Basket' },
            cls: 'x-btn-text-icon delete',
            handler: this.handleDelete,
            scope: this
        },'-',{
            text: 'Refresh',
            tooltip: { title:'Refresh', text: 'Refresh the list of Baskets' },
            cls: 'x-btn-text-icon refresh',
            handler: function() {
                ds.load();
            },
            scope: this
        },{
            text: 'Chart',
            tooltip: { title:'Chart', text: 'Chart' },
            cls: 'x-btn-text-icon chart',
            handler: this.showCategoryDialog,
            scope: this
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 7,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
				
        onContextMenu: function(e) {
                         if (e.shiftKey) return;
                         e.stopEvent();
                         contextMenu.showAt(e.getXY());
                       },
        loadMask: true,
        width:600,
        height:300,
        frame:true,
        title:'Support for standard Panel features such as framing, buttons and toolbars',
        iconCls:'icon-grid',
        renderTo: document.body
    });
    ds.load({params:{start:0, limit:25, forumId: 4}});
    onCellClick = function(grid, rind, cind, e) {
    	recs = sm.getSelections();
    	jsBar.legendLabels.length=0;
    	jsBar.datas.length = 0;
    	for (rcind=0; rcind<recs.length; rcind++) {
    		rs = recs[rcind];
				jsBar.legendLabels[jsBar.legendLabels.length]=rs.get('company');
				
				_datas=[rs.get('price'), rs.get('change'), rs.get('pctChange')];
				
				jsBar.datas[jsBar.datas.length]=_datas;
			} 
  		jsBar.drawChart();
  		
    	jsBar1.legendLabels.length=0;
    	jsBar1.datas.length = 0;
    	
    	for (rcind=0; rcind<recs.length; rcind++) {
    		rs = recs[rcind];
				jsBar1.legendLabels[jsBar1.legendLabels.length]=rs.get('company');
				
				_datas=[rs.get('price'), rs.get('change'), rs.get('pctChange')];
				
				jsBar1.datas[jsBar1.datas.length]=_datas;
			} 
			
  		jsBar1.drawChart();
  		
    	jsBar2.legendLabels.length=0;
    	jsBar2.datas.length = 0;
    	
    	for (rcind=0; rcind<recs.length; rcind++) {
    		rs = recs[rcind];
				jsBar2.legendLabels[jsBar2.legendLabels.length]=rs.get('company');
				
				_datas=[rs.get('price'), rs.get('change'), rs.get('pctChange')];
				
				jsBar2.datas[jsBar2.datas.length]=_datas;
			} 
			
  		jsBar2.drawChart();
    };
		grid4.on('cellclick', onCellClick, this);
    var tabs = new Ext.TabPanel({
    		id:'chartCanvasTabs',
        renderTo:document.body,
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        floating:false,
        enableTabScroll:true,
        width:600,
        height:480,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });
    // tab generation code
    
    var index = 0;
    
    
_N_Tab=0;
_TAB_PRE='_tabPanel-';
_CANVAS_PRE='_chartCanvas-';
_tab_id=_TAB_PRE+'BAR'+'-'+_N_Tab;
_canvas_id='canvas'+_N_Tab;
  jsBar = new Bar();
	tabs.add({
						id:_tab_id,
            title: 'example up down',
            iconCls: 'chart-bar',
            html: jsBar.mkDiv('', '', 0, (tabs.floating ? 0 : tabs.getPosition()[1]+30), tabs.getInnerWidth(), tabs.getInnerHeight()-tabs.getFrameHeight(), '', _canvas_id, false,false,jsBar.jsc_ie),
            closable:true
  }).show();
	jsBar.chartTitle='<B><font style="font-size:20px;font-family:Arial,Helvetica,sans-serif;color:black;">test haha<\/font></B>';
  jsBar.canvasWidth = 550;
  jsBar.canvasHeight = 400;
  jsBar.canvasID = _canvas_id;
  jsBar.canvasLeft = 60;
  jsBar.canvasTop = 40;
  jsBar.canvasRight = 10;
  jsBar.canvasBottom = 60;
  jsBar.dataMin=0;
  jsBar.dataMax=8;
  jsBar.barBoder={"width":"1","color":"#000000","style":"solid"};
  jsBar.paints=['ff0000','009f00','4444ff','ffaa00'];
  jsBar.XAxisTitle='XTest';
  jsBar.YAxisTitle='Ytest';
  aprop = new AxisProperties(false);
  aprop.dataProperties = new DataProperties();
  aprop.labelProperties = new LabelProperties();
  aprop.labelProperties.showTicks = 1;
  aprop.labelProperties.showGridLines = 0;
  aprop.dataProperties.setUserDefinedScale(0, 10, 10);
  jsBar.axisProperties = aprop;
  jsBar.legend = new LegendProperties(JSCHART_RIGHT, 1, 100, 20);
	jsBar.axisLabels=['test 1','test 2','test 3'];
  
	_N_Tab++;
	_tab_id=_TAB_PRE+'BAR'+'-'+_N_Tab;
	_canvas_id='canvas'+_N_Tab;
  jsBar1 = new Bar();
	tabs.add({
						id:_tab_id,
            title: 'example left right',
            iconCls: 'chart-bar',
            html: jsBar1.mkDiv('', '', 0, (tabs.floating ? 0 : tabs.getPosition()[1]+30), tabs.getInnerWidth(), tabs.getInnerHeight()-tabs.getFrameHeight(), '', _canvas_id, false,false,jsBar1.jsc_ie),
            closable:true
  }).show();
	jsBar1.chartTitle='<B><font style="font-size:20px;font-family:Arial,Helvetica,sans-serif;color:black;">test left to right<\/font></B>';
  jsBar1.canvasWidth = 550;
  jsBar1.canvasHeight = 400;
  jsBar1.canvasID = _canvas_id;
  jsBar1.canvasLeft = 60;
  jsBar1.canvasTop = 40;
  jsBar1.canvasRight = 10;
  jsBar1.canvasBottom = 60;
  jsBar1.dataMin=0;
  jsBar1.dataMax=8;
  jsBar1.paints=['ff0000','009f00','4444ff','ffaa00'];
  jsBar1.barBoder={"width":"1","color":"#000000","style":"inset"};
  jsBar1.XAxisTitle='XTest1';
  jsBar1.YAxisTitle='Ytest1';
  aprop1 = new AxisProperties(true);
  aprop1.dataProperties = new DataProperties();
  aprop1.labelProperties = new LabelProperties();
  aprop1.labelProperties.showTicks = 1;
  aprop1.labelProperties.showGridLines = 0;
  aprop1.dataProperties.setUserDefinedScale(0, 10, 10);
  jsBar1.axisProperties = aprop1;
  jsBar1.legend = new LegendProperties(JSCHART_RIGHT, 1, 100, 20);
	jsBar1.axisLabels=['Part 1','Part 2','Part 3'];
	
	_N_Tab++;
	_tab_id=_TAB_PRE+'BAR'+'-'+_N_Tab;
	_canvas_id='canvas'+_N_Tab;
  jsBar2 = new Bar();
	tabs.add({
						id:_tab_id,
            title: 'example boder',
            iconCls: 'chart-bar',
            html: jsBar2.mkDiv('', '', 0, (tabs.floating ? 0 : tabs.getPosition()[1]+30), tabs.getInnerWidth(), tabs.getInnerHeight()-tabs.getFrameHeight(), '', _canvas_id, false,false,jsBar2.jsc_ie),
            closable:true
  }).show();
	jsBar2.chartTitle='<B><font style="font-size:20px;font-family:Arial,Helvetica,sans-serif;color:black;">test with boder<\/font></B>';
  jsBar2.canvasWidth = 550;
  jsBar2.canvasHeight = 400;
  jsBar2.canvasID = _canvas_id;
  jsBar2.canvasLeft = 60;
  jsBar2.canvasTop = 40;
  jsBar2.canvasRight = 10;
  jsBar2.canvasBottom = 60;
  jsBar2.dataMin=0;
  jsBar2.dataMax=8;
  jsBar2.boder={"width":"1","color":"#000000","style":"solid"};
  jsBar2.barBoder={"width":"1","color":"#000000","style":"outset"};
  jsBar2.paints=['ff0000','009f00','4444ff','ffaa00'];
  jsBar2.XAxisTitle='XTest1';
  jsBar2.YAxisTitle='Ytest1';
  aprop2 = new AxisProperties(true);
  aprop2.dataProperties = new DataProperties();
  aprop2.labelProperties = new LabelProperties();
  aprop2.labelProperties.showTicks = 1;
  aprop2.labelProperties.showGridLines = 1;
  aprop2.dataProperties.setUserDefinedScale(0, 10, 10);
  aprop2.dataProperties.showTicks = 1;
  aprop2.dataProperties.showGridLines = 1;
  jsBar2.axisProperties = aprop2;
  jsBar2.legend = new LegendProperties(JSCHART_BOTTOM, 1, 100, 20);
	jsBar2.axisLabels=['Part 1','Part 2','Part 3'];
	});

// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co','30','50','20','9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',32,35,43,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',10,20,30,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52,40,80,'9/1 12:00am', 'Finance'],
    ['American International Group, Inc.',64,31,49,'9/1 12:00am', 'Services'],
    ['AT&T Inc.',31,48,54,'9/1 12:00am', 'Services'],
    ['Boeing Co.',75,53,71,'9/1 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67,92,39,'9/1 12:00am', 'Services'],
    ['E.I. du Pont de Nemours and Company',40,51,28,'9/1 12:00am', 'Manufacturing'],
    ['Exxon Mobil Corp',68,43,64,'9/1 12:00am', 'Manufacturing'],
    ['General Electric Company',34,8,23,'9/1 12:00am', 'Manufacturing']
];